
        //定义每一列之间的间隙
        var gap = 15
        
        window.onload = function(){
            var box = document.getElementById('box')
            var items = box.children
             waterFall()
            function waterFall(){
                //1.确定列数 = 页面的宽度 / 图片的宽度
                // var pageWidth = getClient().width
                var pageWidth = box.offsetWidth
                var itemWidth = items[0].offsetWidth
                var columns = parseInt(pageWidth / (itemWidth + gap))
                var arr = []
                for(var i = 0; i < items.length; i++){
                    if(i < columns){
                        //2.确定第一行
                        items[i].style.top = 0
                        items[i].style.left = (itemWidth + gap) * i + 'px'
                        arr.push(items[i].offsetHeight)
                    }else{  
                        var minHeight = arr[0]
                        //3.找到数组中高度最小的和他的索引
                        var index = 0                   
                        for(var j = 0; j < arr.length; j++){
                            if(minHeight > arr[j]){
                                minHeight = arr[j]
                                index = j                 
                            }
                        }
                        // console.log(index)
                        //4.设置下一行的第一个盒子位置
                        //top值就是最小列的高度 + gap
                      
                        items[i].style.top = arr[index] + gap + 'px'
                        //left值就是最小列距离左边的距离
                        items[i].style.left = items[index].offsetLeft + 'px'

                        //5.修改最小列的高度 
                        //最小列的高度 = 当前自己的高度 + 凭借过来的高度 + 间隙的高度
                        arr[index] = arr[index] + items[i].offsetHeight  + gap
                    }
                }
            }
            // 页面尺寸改变时触发
            window.onresize = function(){
                waterFall()
            }
            // 当加载到第27张的时候
            window.onscroll = function(){
                if(getClient().height + getScrollTop() >= items[items.length - 1].offsetTop){
                    // 模拟ajax获取数据
                    var datas = [
                        "images/b01.jpg","images/b02.jpg",
                        "images/b03.jpg","images/b04.jpeg",
                        "images/b05.jpg","images/b06.jpeg",
                        "images/b07.jpg","images/b08.jpeg",
                        "images/b09.jpg","images/b10.jpeg",
                        "images/b11.jpg","images/b12.jpeg",
                        "images/b13.jpeg","images/b14.jpeg",
                        "images/b15.jpeg","images/b16.jpeg",
                        "images/b17.jpeg","images/b18.jpeg",
                        "images/b19.jpeg","images/b20.jpg",
                        "images/b21.jpeg","images/b22.jpeg",
                        "images/b23.jpeg","images/b24.jpg",
                        "images/b25.jpeg","images/b26.jpg",
                        "images/b27.jpeg"
                    ];
                    for(var i = 0; i < datas.length; i++){
                        var div = document.createElement("div")
                        div.className = "item"
                        div.innerHTML = '<a href="ontesChild.html">'+
                                        '<img src="' + datas[i] + '" alt="">'+
                                        '<p>早餐时间~简简单单</p>'+
                                        '<div class="left"><img src="images/btouxiang1.PNG" class="imgtouxiang"><span class="name">张小厨厨房</span></div>'+
                                        '<div class="right"><img src="images/bkongxin.PNG" class="imgxin"><span class="zan">114</span></div></a>'
                        box.appendChild(div)
                    }
                    waterFall()
                }
            //     var nav=document.querySelector('#header')
            //     if(document.documentElement.scrollTop>0){
            //         nav.className="fixed"
            //     }
            //     else{
            //         nav.className="static"
            //     }
             }
          }
        function getClient(){
            return{
                width:window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
                height:window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
            }
        }
        function getScrollTop(){
            return window.pageYOffset || document.documentElement.scrollTop
         }
